{% extends "airflow/dag.html" %}
{% block title %}Airflow - DAGs{% endblock %}

{% block tail %}
    {{ super() }}
    <script src="{{ url_for('static', filename='d3.v3.min.js') }}"></script>
    <script src="{{ url_for('static', filename='highcharts.js') }}"></script>
    <script src="/ck/static/chartkick.js"></script>
    <script>
      // We blur task_ids in demo mode
    $( document ).ready(function() {
      if ("{{ demo_mode }}" == "True") {
          d3.select("svg")
            .append("filter")
            .attr("id", "blur-effect-1")
            .append("feGaussianBlur")
            .attr("stdDeviation", 3);
          d3.selectAll("g.highcharts-legend-item text").style("filter", "url(#blur-effect-1)");
      }
      $('#uncheck').click(function(){
          chart = Highcharts.charts[0];
          for(i=0; i < chart.series.length; i++) {
            chart.series[i].hide();
          }
      });
      $('#check').click(function(){
          chart = Highcharts.charts[0];
          for(i=0; i < chart.series.length; i++) {
            chart.series[i].show();
          }
      });
    });
    </script>
    <div class="container">
      {% line_chart data with height=height library=chart_options%}
      <div class="text-center">
        <button class="btn" id="uncheck">Hide all series</button>
        <button class="btn" id="check">Show all series</button>
      </div>
    </div>

{% endblock %}
